<template>
  <div class="filter-form">
    <el-form
      ref="form"
      :label-suffix="isColon ? ':' : ''"
      :rules="rules"
      :model="propsForm"
      class="PMSearch general-search"
      :label-width="labelWidth"
    >
      <template v-for="(it, idx) in formColumn">
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          v-if="it.type == 'AsyncSelect'"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          :required="it.required"
          :class="it.itemClass"
        >
          <AsyncSelect
            class="inputbox"
            :multiple="it.multiple"
            :collapse-tags="!it.collapseTags"
            :form-size="formSize"
            :disabled="it.disabled"
            :placeholder="it.placeholder"
            :url="it.url"
            :name="it.name"
            :custom="it.custom"
            :event-custom="it.eventCustom"
            :async-name="it.asyncName"
            :label-name="it.labelName"
            :value-name="it.valueName"
            :options="it.options || []"
            :parameter-obj="propsForm"
            :init-value="propsForm[it.name]"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            @onChange="onChange($event, it)"
            :style="`width: ${it.width ? it.width : rightWidth}`"
          />
        </el-form-item>
        <!-- 数字输入框 -->
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'number'"
          :rules="it.rules"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-input
            v-model="propsForm[it.name]"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :style="`width: ${it.width ? it.width : rightWidth}`"
            size="small"
            :placeholder="it.placeholder"
            :class="it.class"
            :minlength="1"
            :maxlength="13"
            :disabled="it.disabled"
            clearable
            @input="
              (value) => {
                propsForm[it.name] = value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1');
              }
            "
            @change="it.onChange && it.onChange()"
          ></el-input>
        </el-form-item>
        <!-- 金额输入框 -->
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'amountNumber'"
          :rules="it.rules"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-input
            v-model="propsForm[it.name]"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :style="`width: ${it.width ? it.width : rightWidth}`"
            size="small"
            :placeholder="it.placeholder"
            :class="it.class"
            :minlength="1"
            :maxlength="17"
            :disabled="it.disabled"
            clearable
            @change="it.onChange && it.onChange(it.name, $event, propsForm)"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          v-else-if="it.type == 'input'"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-input
            v-if="!it.isText"
            v-model="propsForm[it.name]"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :class="it.class"
            clearable
            :size="formSize"
            :disabled="it.disabled"
            :placeholder="it.placeholder"
            :style="`width: ${it.width ? it.width : rightWidth}`"
            @change="it.onChange && it.onChange()"
          ></el-input>
          <div v-else :class="it.inputClass">
            <span>{{ it.formatText ? it.formatText(propsForm[it.name]) : propsForm[it.name] }}</span>
          </div>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          v-else-if="it.type == 'select'"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-select
            :class="it.class"
            v-model="propsForm[it.name]"
            :multiple="it.multiple"
            :collapse-tags="!it.collapseTags"
            filterable
            :default-first-option="true"
            :clearable="it.clearable === false ? false : true"
            :size="formSize"
            :disabled="it.disabled"
            :placeholder="it.placeholder"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :allow-create="it.allowCreate"
            @change="it.onChange && it.onChange()"
            @visible-change="(e) => it.onVisibleChange && it.onVisibleChange(e)"
            @remove-tag="it.onRemoveTag && it.onRemoveTag()"
            :style="`width: ${it.width ? it.width : rightWidth}`"
          >
            <el-option
              v-for="(item, index) in it.options"
              :key="index"
              :value="item.value"
              :label="item.label"
              :title="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          v-else-if="it.type == 'remote'"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-select
            :class="it.class"
            :multiple="it.multiple"
            :collapse-tags="!it.collapseTags"
            v-model="propsForm[it.name]"
            filterable
            :default-first-option="true"
            remote
            clearable
            :size="formSize"
            :disabled="it.disabled"
            :placeholder="it.placeholder"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :remote-method="remoteMethod"
            @change="it.onChange && it.onChange()"
            :style="`width: ${it.width ? it.width : rightWidth}`"
          >
            <el-option
              v-for="(item, index) in it.options"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'date'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-date-picker
            :class="it.class"
            v-model="propsForm[it.name]"
            :type="it.type"
            value-format="yyyy-MM-dd"
            :size="formSize"
            :placeholder="it.placeholder"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :disabled="it.disabled"
            :style="`width: ${it.width ? it.width : rightWidth}`"
            @change="it.onChange && it.onChange()"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'daterange'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-date-picker
            :class="it.class"
            :style="`width: ${it.width ? it.width : rightWidth}`"
            v-model="propsForm[it.name]"
            :type="it.type"
            value-format="yyyy-MM-dd"
            :size="formSize"
            :placeholder="it.placeholder"
            :disabled="it.disabled"
            range-separator="~"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'monthrange'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-date-picker
            :class="it.class"
            :style="`width: ${it.width ? it.width : rightWidth}`"
            v-model="propsForm[it.name]"
            :type="it.type"
            value-format="yyyy-MM-dd"
            :size="formSize"
            :placeholder="it.placeholder"
            :disabled="it.disabled"
            range-separator="~"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'year'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-date-picker
            :class="it.class"
            v-model="propsForm[it.name]"
            :type="it.type"
            :size="formSize"
            :picker-options="it.pickerOptions"
            :placeholder="it.placeholder"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :disabled="it.disabled"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'month'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-date-picker
            :class="it.class"
            v-model="propsForm[it.name]"
            :type="it.type"
            :size="formSize"
            :picker-options="it.pickerOptions"
            :placeholder="it.placeholder"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :disabled="it.disabled"
            format="yyyy-MM"
            value-format="yyyy-MM"
            @change="it.onChange && it.onChange()"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'datetime'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-date-picker
            :class="it.class"
            v-model="propsForm[it.name]"
            :type="it.type"
            :size="formSize"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="it.pickerOptions"
            :placeholder="it.placeholder"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :disabled="it.disabled"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'percentInput'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-input
            v-model="propsForm[it.name]"
            :style="`width: ${it.width ? it.width : rightWidth}`"
            size="small"
            :placeholder="it.placeholder"
            :title="propsForm[it.name] ? propsForm[it.name] : it.placeholder"
            :class="it.class"
            :minlength="1"
            :maxlength="13"
            :disabled="it.disabled"
            oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')"
            @change="it.onChange && it.onChange()"
          >
            <template slot="append">{{ it.right }}</template>
          </el-input>
        </el-form-item>
        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'number1'"
          :required="it.required"
          :class="it.itemClass"
        >
          <el-input-number
            v-model="propsForm[it.name]"
            :style="`width: ${it.width ? it.width : rightWidth};text-align: left`"
            size="small"
            :class="it.class"
            @change="it.onChange && it.onChange()"
            :label="it.label"
            :controls="it.controls ? it.controls : false"
          ></el-input-number>
        </el-form-item>

        <el-form-item
          v-show="!foldStatus || idx < foldNum"
          :class="it.itemClass"
          class="checkoux-up"
          :label="it.label"
          :prop="it.name"
          :key="idx"
          v-else-if="it.type == 'checkbox'"
          :required="it.required"
        >
          <el-checkbox-group :max="it.max" :disabled="it.disabled" v-model="propsForm[it.name]" :class="it.class">
            <el-checkbox v-for="(item, index) in it.options" :key="index" :label="item.label">{{
              item.label
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>
      <div v-if="isFold" class="TextR fold-box">
        <span v-if="foldStatus" @click="foldStatus = false">{{ $t('展开更多索引条件>>') }}</span>
        <span v-else @click="foldStatus = true">{{ $t('折叠更多索引条件<<') }}</span>
      </div>
      <div v-if="isBtn" :class="['TextR', 'btn-box', { 'btn-fold-box': isFold }]">
        <slot>
          <el-button v-if="emptyButton" class="empty-button" :size="formSize" type="primary" @click="emptyForm()"
            >{{ $t('清空') }}
          </el-button>
          <el-button
            v-if="downloadButton"
            :loading="downloadLoading"
            class="export-button"
            :size="formSize"
            type="primary"
            @click="download"
            >{{ $t('导出') }}</el-button
          >
          <el-button v-if="searchButton" class="search-button" @click="search" :size="formSize" type="primary">
            {{ $t('查询') }}
          </el-button>
        </slot>
        <slot name="customs-btn" :data="propsForm"></slot>
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

import AsyncSelect from '@/components/AsyncSelect';
import { post } from '@/utils/request/index';
import { resetFormItem } from '@/utils/tools';

@Component({
  components: {
    AsyncSelect: AsyncSelect,
  },
})
export default class FormList extends Vue {
  @Prop({ default: () => [] }) formColumn: any;
  @Prop({ default: () => {} }) propsForm: any;
  @Prop({ default: '' }) url: any;
  @Prop({ default: () => {} }) customFunc: any;
  @Prop({ default: () => {} }) lowerChange: any;
  @Prop({ default: 'small' }) formSize: any;
  @Prop({ default: true }) emptyButton: any;
  @Prop({ default: false }) downloadButton: any;
  @Prop({ default: false }) downloadLoading: any;
  @Prop({ default: true }) searchButton: any;
  @Prop({ default: true }) isBtn: any;
  @Prop({ default: false }) isFold: any;
  @Prop({ default: false }) customEmpty: any;
  @Prop({ default: false }) customAfterEmpty: any;
  @Prop({ default: '' }) timer: any;
  @Prop({ default: true }) isColon: any;
  @Prop({ default: () => {} }) initForm: any;
  @Prop({ type: String, required: false, default: 'calc( 100% - 225px)' }) labelWidth: any;
  @Prop({ type: String, required: false, default: '225px' }) rightWidth: any;
  @Prop({ type: Function, required: false, default: () => {} }) ganged_select;
  @Prop({ default: undefined }) elementSize;
  @Prop({
    type: Object,
    required: false,
    default: () => {},
  })
  rules;

  // @Watch('screenWidth')
  // fn1(newValue) {
  //   if (newValue <= 1920) {
  //     this.foldNum = 5;
  //   } else {
  //     this.foldNum = 7;
  //   }
  // }

  foldStatus = false;
  foldNum = 5;
  screenWidth = window.innerWidth;
  downloadUrl = '';
  data = {
    downloadUrl: this.downloadUrl,
    size: this.size,
  };
  handleResize() {
    this.screenWidth = window.innerWidth; // 更新屏幕宽度
  }
  created() {
    window.addEventListener('resize', this.handleResize); // 监听窗口大小变化
  }
  destroyed() {
    window.removeEventListener('resize', this.handleResize); // 移除监听器
  }
  mounted() {
    this.downloadUrl = this.url;
    if (window.innerWidth <= 1900) {
      this.foldNum = 5;
    } else {
      this.foldNum = 7;
    }
  }
  public get size() {
    const rs = this.formColumn.length % 3;

    if (rs === 1) {
      return 16;
    } else if (rs === 2) {
      return 8;
    } else {
      return 24;
    }
  }

  search = () => {
    this.$emit('onSearch', this.propsForm);
  };
  remoteMethod = (query) => {
    this.$emit('remoteMethod', query);
  };
  download = () => {
    this.url ? post(this.url, this.propsForm) : this.$emit('download', this.propsForm);
  };

  emptyForm = (isContinue?) => {
    if (this.customEmpty && !isContinue) {
      this.$emit('empty', this.propsForm);
      return;
    }
    resetFormItem(this.propsForm);
    if (this.initForm) {
      const keys = Object.keys(this.initForm);
      keys.forEach((key) => {
        this.propsForm[key] = this.initForm[key];
      });
    }
    if (this.customAfterEmpty) {
      this.$emit('afterEmpty', this.propsForm);
    } else {
      this.search();
    }
  };

  // resetFormItem(formModel: any) {
  //   const keys = Object.keys(formModel);
  //   if (!keys.length) return;
  //   keys.forEach((key) => {
  //     const type = Object.prototype.toString.call(formModel[key]);
  //     if (type === '[object Object]') {
  //       this.resetFormItem(formModel[key]);
  //     } else {
  //       formModel[key] = undefined;
  //     }
  //   });
  // }
  // 模糊查询组件选择触发
  onChange(res, item) {
    const { data, value, valueName, name, eventCustom } = res;
    this.propsForm[name] = value;
    item.onChange && item.onChange(res);
  }
}
</script>
<style lang="less">
@import './index.less';
::v-deep.line-feed .el-form-item__label {
  white-space: pre-line !important;
  height: 32px !important;
  line-height: 16px !important;
}
</style>
